<!--
 * @Description: 
 * @Author: ye_xf
 * @Date: 2022-08-05 16:22:10
 * @LastEditTime: 2022-08-30 09:20:08
 * @LastEditors: Please set LastEditors
 * @Reference: 
-->
<template>
  <div v-if="userData" class="address-detail-box">
    <div class="basis-box">
      <div class="background-box">
        <div class="back" @click="back">
          <i class="fm-icon fm-icon-arrow-left"></i>
        </div>
        <img
          v-if="userData.avatarToken"
          :src="userData.avatarToken | getAvatar"
          class="avatar"
        />
        <div v-else class="avatar avatar-text">
          {{ userData.userFullname | getFamilyName }}
        </div>
      </div>
      <div class="name">
        {{ userData.userFullname }} ({{ userData.userName }})
      </div>
      <div class="btn-box">
        <div class="mr-17" @click="callPhone(userData.phone)">
          <img :src="require('@/assets/img/phone.png')" />
          <span>电话联系</span>
        </div>
        <div class="ml-17" @click="sendNote(userData.phone)">
          <img :src="require('@/assets/img/note.png')" />
          <span>发送短信</span>
        </div>
      </div>
    </div>
    <div class="info-box">
      <div class="item">
        <span class="label">手机号码</span>
        <span class="value">{{ userData.phone }}</span>
      </div>
      <div class="item">
        <span class="label">邮箱</span>
        <span class="value">{{ userData.email }}</span>
      </div>
      <div class="item">
        <span class="label">公司</span>
        <span class="value">
          {{
            userData.orgList.length > 0
              ? userData.orgList[0].parentName
              : '暂无'
          }}
        </span>
      </div>
      <div class="item">
        <span class="label">部门</span>
        <span class="value">
          {{
            userData.orgList.length > 0 ? userData.orgList[0].entName : '暂无'
          }}
        </span>
      </div>
      <div class="item">
        <div class="label">办公地点</div>
        <div class="value">
          {{ userData.officeLocation ? userData.officeLocation : '暂无' }}
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { getUser } from '@/api/user'
import { Toast } from 'fawkes-mobile-lib'

export default {
  name: 'addressDetail',
  components: {},
  data() {
    return {
      userData: null,
      isActive: null,
      loading: false,
    }
  },
  filters: {
    getFamilyName(value) {
      return value?.substr(0, 1)
    },
    getAvatar(val) {
      return `${process.env.VUE_APP_BASE_URL}/sys-storage/download_image?f8s=${val}`
    },
  },
  methods: {
    back() {
      this.$router.push({
        path: '/address',
      })
    },
    getUserInfo() {
      const data = {
        userName: this.$route.query.userName,
      }

      getUser(data).then((res) => {
        if (!res.status) {
          Toast.error({
            message: '用户个人信息获取失败',
          })
          return
        }

        this.userData = res.data
      })
    },
    callPhone(phone) {
      window.location.href = 'tel://' + phone
    },
    sendNote(phone) {
      window.location.href = 'sms:' + phone
    },
  },
  created() {
    this.getUserInfo()
  },
  mounted() {
    //添加自定义返回键响应事件
    document.removeEventListener('backbutton', this.$back, false)
    document.addEventListener('backbutton', this.back, false)
  },
  beforeDestroy() {
    //移除自定义返回键响应事件
    document.removeEventListener('backbutton', this.back, false)
  },
}
</script>

<style scoped lang="less">
.address-detail-box {
  height: 100%;
  background-color: #f7f8fa;

  .basis-box {
    background-color: #fff;

    .background-box {
      position: relative;
      height: 320px;
      margin-bottom: 140px;
      background-size: 100% 100%;
      background-repeat: no-repeat;
      background-image: url('../../../assets/img/address-detail-bg.png');

      .back {
        position: absolute;
        top: 102px;
        left: 16px;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 60px;
        height: 60px;
      }
      .fm-icon-arrow-left {
        color: #000000 !important;
        font-weight: 600 !important;
        font-size: 32px !important;
      }

      .avatar {
        position: absolute;
        left: 32px;
        bottom: 0;
        transform: translateY(50%);
        width: 216px;
        height: 216px;
        border: 2px solid #fff;
        border-radius: 50%;
        box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.12);
      }

      .avatar-text {
        line-height: 216px;
        text-align: center;
        font-size: 60px;
        color: #fff;
        background-color: #4545d1;
      }
    }

    .name {
      padding: 0 40px;
      line-height: 66px;
      font-size: 48px;
      font-weight: bold;
      color: #1d2541;
      letter-spacing: 2px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .btn-box {
      display: flex;
      padding: 32px;

      & > div {
        flex: 1;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 92px;
        background: rgba(69, 69, 209, 0.08);
        border-radius: 16px;

        & > img {
          width: 40px;
          height: 40px;
          margin-right: 16px;
        }

        & > span {
          font-size: 32px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #4545d1;
          line-height: 44px;
        }
      }

      .ml-17 {
        margin-left: 17px;
      }

      .mr-17 {
        margin-right: 17px;
      }
    }
  }

  .info-box {
    margin: 32px;
    background-color: #fff;
    border-radius: 16px;
    .item {
      position: relative;
      display: flex;
      justify-content: space-between;
      align-items: center;
      min-height: 108px;

      padding: 32px;
      box-sizing: border-box;

      &::after {
        display: block;
        content: '';
        position: absolute;
        right: 32px;
        bottom: 0;
        left: 32px;
        height: 1px;
        background: #ebedef;
      }

      .label {
        font-size: 28px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #15171a;
        line-height: 40px;
      }

      .value {
        font-size: 28px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #727478;
        line-height: 40px;
        max-width: 60%;
      }
    }
    .item:last-child {
      &::after {
        display: block;
        content: '';
        position: absolute;
        right: 32px;
        bottom: 0;
        left: 32px;
        height: 1px;
        background: #fff;
      }
    }
  }
}
</style>
